<template>
  <!-- 书籍详情页的书籍介绍 -->
  <div class="bookDetailsBanner">
    <div class="container mt-2">
      <div class="row">

        <div class="card mb-3 col-12 shadow-sm" v-for="(v, k) in this.$store.state.mobiBookList">
          <div class="row no-gutters">
            <!-- 书籍图片 -->
            <div class="col-md-3  col-12 py-2 text-center">
              <img :src="v.images" class="img-fluid selfShadow" alt="...">
            </div>

            <!-- 书籍内容 -->
            <div class="col-md-9 col-12">
              <div class="card-body">
                <h5 class="card-title">{{v.name}}</h5>
                <p class="card-text"><small class="text-muted">{{v.author}}</small></p>
                <hr />

                <div class="d-flex">
                  <modal-box>
                    <div slot="btns" @click="goRead(v)">
                      <router-link to="/readBook" 
                        class="btn btn-dark" 
                        data-toggle="modal" 
                        data-target=".bd-example-modal-sm" 
                        :class="{'disabled': setElementState}">
                          在线阅读
                        </router-link>
                    </div>
                  </modal-box>

                  <!-- 文件下载遇到问题，先将其放过 -->
                  <!-- <div @click="doDownload">
                    <a :href="v.files" class="btn btn-primary ml-4 mr-4" :class="{'disabled': setElementState}">点击下载</a>
                    <a href="http://406gb10671.zicp.vip/testWork/txtFiles/《共产党宣言》.txt" download="《共产党宣言》.txt" class="btn btn-primary ml-4 mr-4" :class="{'disabled': setElementState}">点击下载</a>
                    <span class="text-danger" v-if="flag">请登录后阅读或下载</span>
                  </div> -->
                </div>
                
                <hr />
                <p class="card-text">{{v.desc}} </p>
              </div>
            </div>
          </div>
        </div>
          
      </div>
    </div>
  </div>
</template>

<script>
  import ModalBox from 'components/ModalBox/ModalBox.vue'
  // import LocalStorage from 'components/LocalStorage/LocalStorage.vue'

  export default {
    name: 'BookDetailsBanner',
    components: {
      ModalBox,
      // LocalStorage
    },
    data () {
      return {
        flag: 'true',
        time: 4
      }
    },
    computed: {
      setElementState() {
        // 获取本地的用户数据
        if(localStorage.getItem('userInformation')) {
          this.flag = false;
        }
        return this.flag;
      }
    },
    methods: {
      doDownload() {
        if (this.flag) {
          alert('请登录后下载');
        }
      },
      goRead(v) {
        if (this.flag) {
          alert('请登录后阅读');
        } else {
          setTimeout(() => {
            $('.bd-example-modal-sm').modal('hide');
          }, 3800)
          // 通过书籍的名称来发送在线阅读书籍数据的请求
          localStorage.setItem('onlineBooks', v.name);
          // 通过Id写入用户在线阅读信息，并且请求对应的书签
          this.$store.dispatch('asynOnlineReadRecord')
        }
      }
    }
  }

</script>

<style scoped>
  .selfShadow {
    box-shadow: 5px 5px 10px #999;
  }
</style>